import { defineComponent, ref, reactive, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { ElCard, ElSpace, ElButton, ElTabs, ElTabPane, ElRow, ElCol, ElLink } from 'element-plus'

import type { FormValuesType } from './typings'

import AliIcon from '~/components/AliIocn'
import styles from '../../index.module.scss'
import AlarmAnalysis from './alarmAnalysis'
import HistoricalAlarm from './historicalAlarm'
import MapView from '../../components/map'
import SaasTitle from '~/components/SaasTitle'

export default defineComponent(function Demo() {
  const store = useStore()
  const router = useRouter()
  const activeTabKey = ref<string>('1')
  const info = reactive<FormValuesType>({})
  const marker = reactive({
    lng: '',
    lat: ''
  })

  onMounted(() => {
    infoAjax()
  })
  //  数据初始化
  const infoAjax = async () => {
    const { id } = router.currentRoute.value.query
    const { code, data } = await store.dispatch('police/AlarmInfoView', { id })
    if (code === 200) {
      info.alarmName = data.alarmName
      info.deviceId = data.deviceId
      info.deviceName = data.deviceName
      info.workAreaId = data.workAreaId
      info.alarmLevel = data.alarmLevel
      info.loopPhase = data.loopPhase
      info.loopName = data.loopName
      info.protectState = data.protectState
      info.alarmValue = data.alarmValue
      info.alarmState = data.alarmState === 1 ? '报警中' : '已恢复'
      info.orderState = data.orderState
      info.reportTime = data.reportTime
      info.recoverTime = data.recoverTime
      info.workAreaName = data.workAreaName

      marker.lng = data.lon
      marker.lat = data.lat
    }
  }
  //  返回
  const goBack = () => {
    router.go(-1)
  }

  return () => (
    <ElCard class={styles['info-card']}>
      <div>
        <SaasTitle type="primary">
          <ElLink underline={false} class={styles['police-edit-title']}>
            警报详情
          </ElLink>
        </SaasTitle>
        <ElSpace class={styles['info-tab-option-btns']} style="top: 20px;">
          <ElButton text type="primary" onClick={goBack}>
            返回上一级&nbsp;
            <AliIcon type="icon-fanhuishangyiji" />
          </ElButton>
        </ElSpace>
      </div>
      <div style="margin: 16px 0;border-top: 1px solid #ECECEC;"></div>
      <ElRow>
        <ElCol span={4}>警报名称：{info.alarmName}</ElCol>
        <ElCol span={4}>设备编号：{info.deviceId}</ElCol>
        <ElCol span={4}>设备名称：{info.deviceName}</ElCol>
        <ElCol span={4}>所属工区：{info.workAreaName}</ElCol>
        <ElCol span={4}>警报等级：{info.alarmLevel}</ElCol>
      </ElRow>
      <div style="height: 10px;"></div>
      <ElRow>
        <ElCol span={4}>线路/相位：{info.loopPhase}</ElCol>
        <ElCol span={4}>回路开关：{info.loopName}</ElCol>
        <ElCol span={4}>是否保护：{info.protectState ? '未保护' : '保护'}</ElCol>
        <ElCol span={4}>警报值：{info.alarmValue}</ElCol>
        <ElCol span={4}>当天上报数：{info.alarmLevel}</ElCol>
      </ElRow>
      <div style="height: 10px;"></div>
      <ElRow>
        <ElCol span={4}>警报状态：{info.alarmState}</ElCol>
        <ElCol span={4}>工单状态：{info.orderState}</ElCol>
        <ElCol span={4}>警报时间：{info.reportTime}</ElCol>
        <ElCol span={4}>恢复时间：{info.recoverTime}</ElCol>
      </ElRow>
      <div style="height: 20px;"></div>
      <ElTabs v-model={activeTabKey.value}>
        <ElTabPane key="1" name="1" label="警报分析" />
        <ElTabPane key="2" name="2" label="历史警报" />
        <ElTabPane key="3" name="3" label="警报地址" />
      </ElTabs>
      {/* 报警分析 */}
      {activeTabKey.value === '1' && <AlarmAnalysis />}
      {/* 历史报警 */}
      {activeTabKey.value === '2' && <HistoricalAlarm />}
      {/* 报警地址 */}
      {activeTabKey.value === '3' && (
        <MapView style="height: 600px;" marker={marker} id="policeInfo" />
      )}
    </ElCard>
  )
})
